<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{list.length}}</strong></span>
    <ul class="filters" @click="shaixuan" >
      <li>
        <a  @click="isAl='all'"  :class="{selected:isAl=='all'}" href="javascript:;" >全部</a>
      </li>
      <li>
        <a  @click="isAl='no'" :class="{selected:isAl=='no'}" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="isAl='yes'" :class="{selected:isAl=='yes'}" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" >清除已完成</button>
  </footer>
</template>

<script>
export default {
   data() {
     return {
       isAl:'all'
     }
   },
    props:["list"],
    methods:{
      shaixuan(){
        this.$emit('shai', this.isAl);
      }
    }

}
</script>